<template>
	<view class="bg-light">
		<tabsTop tabName="个人中心"></tabsTop>
		<!-- 个人信息部分 -->
		<view class="sign w-100 flex align-center" style="overflow: hidden; height: 400rpx;" :style="'background-image:url('+my_bj+');'">
			<!-- 右上角 -->
			<view class="flex text-white" style="position: absolute;top: 40rpx;right: 20rpx;">
				<!-- 签到 -->
				<view class="flex align-center mr-2" @click="goSign()">
					<uni-icons type="compose" color="white" size="24"></uni-icons>
					<view v-if="Status === 'fail'">已签到</view>
					<view v-else>签到</view>
				</view>
				<!-- 会员码 -->
				<view class="flex align-center">
					<uni-icons type="compose" color="white" size="24"></uni-icons>
					<view>会员码</view>
				</view>
			</view>
			<!-- 头像信息 -->
			<view class="my-4 mx-3 flex align-center">
				<view class="flex flex-column align-center" style="position: relative;z-index: 999;" @click="goInfo()">
					<image :src="userImage" class="rounded-circle flex-shrink border border-white" style="width: 120rpx; height: 120rpx" mode=""></image>
				</view>
				<view class="py-2 ml-2 flex flex-column align-center" style="height: 80rpx">
					<text class="font-md font-weight-bold text-ellipsis ml-1 mb-1" style="width: 350rpx" @click="goInfo()">{{ userName }}</text>
					<!-- <button class="vip rounded-lg">会员中心</button> -->
				</view>
			</view>
			<!-- 我的会员 -->
			<view class="user-info__level-wrapper-2">
				<view class="level2-header">
					<text class="shop-name">小康龙江</text>
				</view>
				<view class="level2-body">
					<!-- <button class="level van-button van-button--default van-button--normal van-button--plain van-button--round"
						style="color: rgb(227, 200, 111);" @click="becomeVip">
						<view class="level-name">
							<text>成为会员</text>
							<i class="van-icon van-icon-arrow"></i>
						</view>
					</button> -->
					<image src="https://img01.yzcdn.cn/public_files/2019/02/20/5d01f9357d62cef3fd523494bd1fecf0.png" alt="vip" class="level2-vip"></image>
				</view>
			</view>
		</view>
		<!-- 内容跳转部分 -->
		<view class="bg-hover-dark py-2">
			<!-- 余额、优惠券 -->
			<view class="mx-2 flex bg-white mb-2 p-2 content-center"
				style="justify-content: space-around;position: relative;">
				<view v-for="(item,index) in balance" :key="index" class="text-center" @click="goCoupons(item.text)">
					<view v-if="index === 0">{{ (item.amount / 1000).toFixed(2) }}</view>
					<view v-else-if="item.text === '零钱'">
						<uni-icons type="wallet" size="20"></uni-icons>
					</view>
					<view v-else>{{ item.amount }}</view>
					<view>{{item.text}}</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="mx-2 bg-white mb-2 py-2">
				<!-- 全部订单 -->
				<view class="mx-2 flex justify-between" @click="goToOrders('所有订单')">
					<text class="font">我的订单</text>
					<view class="flex align-center">
						<text class="font text-muted">查看全部订单</text>
						<uni-icons type="right" color="#828d96" size="17"></uni-icons>
					</view>
				</view>
				<!-- 收货状态 -->
				<view class="mx-2 flex content-center mt-2">
					<view v-for="(item,index) in state" :key="index" :class="index!=0?'ml-1':''" class="bg-light text-center py-2"
						style="width: 20%;position: relative;" @click="goToOrders(item.text)">
						<uni-icons v-if="item.type == 1"  fontFamily="iconfont" color="#1d2124" size="25">{{item.icon}}</uni-icons>
						<uni-icons v-else :type="item.icon" size="25"></uni-icons>
						<view class="font-sm mt-1">{{item.text}}</view>
						<!-- <view v-if="item.count > 0" class="badge">{{item.count}}</view> -->
					</view>
				</view>
			</view>
			<!-- 购物车、任务中心 -->
			<view class="mx-2 flex flex-column bg-white mb-2 py-1">
				<view v-for="(item,index) in task" :key="index" :class="index==0?'':'border-top border-light'" class="py-1 mx-2 flex justify-between content-center h6"
					@click="goTask(item.text)">
					<view class="flex align-center">
						<uni-icons v-if="item.type == 1"  fontFamily="iconfont" color="#1d2124" size="25">{{item.icon}}</uni-icons>
						<uni-icons v-else :type="item.icon" size="25"></uni-icons>
						<view class="ml-1">{{item.text}}</view>
					</view>
					<uni-icons type="right" color="#828d96" size="16"  class="flex align-center"></uni-icons>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="mx-2 flex flex-column bg-white py-1 mb-2">
				<view v-for="(item,index) in information" :key="index" :class="index==0?'':'border-top border-light'" class="py-1 mx-2 flex justify-between content-center h6"
					@click="goPage(item.text)">
					<view class="flex align-center">
						<uni-icons v-if="item.type == 1"  fontFamily="iconfont" color="#1d2124" size="25">{{item.icon}}</uni-icons>
						<uni-icons :type="item.icon" size="25"></uni-icons>
						<view class="ml-1">{{item.text}}</view>
					</view>
					<uni-icons type="right" color="#828d96" size="16" class="flex align-center"></uni-icons>
				</view>
			</view>
			<view class="mx-2 flex flex-column bg-white py-1">
				<view v-for="(item,index) in subscribe" :key="index" :class="index==0?'':'border-top border-light'" class="py-1 mx-2 flex justify-between content-center h6"
					@click="goReport(item.text)">
					<view class="flex align-center">
						<uni-icons v-if="item.type == 1"  fontFamily="iconfont" color="#1d2124" size="25">{{item.icon}}</uni-icons>
						<uni-icons :type="item.icon" size="25"></uni-icons>
						<view class="ml-1">{{item.text}}</view>
					</view>
					<uni-icons type="right" color="#828d96" size="16" class="flex align-center"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor></botSponsor>
		<tabsBottom :tabId="3"></tabsBottom>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getIsSign
	} from "@/api/sign.js"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor // 底部赞助商
		},
		data() {
			return {
				my_bj: app.globalData.Domain_ICON+'/my_bj.jpg',
				userImage: app.globalData.memberInfo.Image,
				userName: app.globalData.memberInfo.Nick,
				vip: app.globalData.Domain_ICON+'/vip.jpg',
				balance: [
					{
						amount: 0,
						text: '余额',
					}, {
						amount: 100,
						text: '小康币',
					}, {
						amount: 0,
						text: '卡',
					},
					{
						amount: 0,
						text: '优惠券',
					},
					{
						amount: '',
						text: '零钱',
					}
				],
				state: [
					{
						type:1,
						icon: '\ue62c',
						text: '待付款',
						count: 2,
					},
					{
						type:1,
						icon: '\ue625',
						text: '待发货',
						count: 1,
					},
					{
						type:1,
						icon: '\ue705',
						text: '待收货',
						count: 0,
					},
					{
						type:1,
						icon: '\ue62e',
						text: '待评价',
						count: 0,
					},
					{
						type:1,
						icon: '\ue659',
						text: '退款/售后',
						count: 0,
					},
				],
				task: [{
						type:1,
						icon: '\ue6ef',
						text: '购物车'
					},
					{
						type:1,
						icon: '\ue71e',
						text: '任务中心'
					},
					{
						type:1,
						icon: '\ue6aa',
						text: '返现'
					},
					{
						type:1,
						icon: '\ue618',
						text: '赠品'
					},
				],
				information: [{
						type:1,
						icon: '\ue636',
						text: '收货地址'
					},
					// {
					// 	icon: '\ue643',
					// 	text: '账号与安全'
					// },
					{
						type:1,
						icon: '\ue722',
						text: '个人信息'
					},
				],
				subscribe:[
					{
					type:1,
					icon: '\ue711',
					text: '订阅消息'	
					}
				],
				image: app.globalData.Domain_ICON+'/yfm.jpg!small.webp',
				Status: 'fail',
				form: {
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber
				}
			}
		},
		onShow() {
			this.userImage = app.globalData.memberInfo.Image;
			this.userName = app.globalData.memberInfo.Nick;
		},
		onLoad() {
			this.isSign(this.form);
		},
		methods: {
			goSign() {
				uni.navigateTo({
					url: "/pages/my/sign",
				})
			},
			goInfo() {
				uni.navigateTo({
					url: '/pages/my/information?Member_SerialNumber='+app.globalData.memberInfo.Member_SerialNumber
				})
			},
			goTask(text) {
				if (text === '购物车') {
					uni.navigateTo({
						url: '/pages/shopCart/shopCart'
					});
				} else if (text === '任务中心') {
					uni.navigateTo({
						url: '/pages/my/task'
					});
				} else if (text === '返现') {
					uni.navigateTo({
						url: '/pages/my/cashback'
					});
				} else if (text === '赠品') {
					uni.navigateTo({
						url: '/pages/my/gifts'
					});
				}
			},
			goCoupons(text) {
				if (text === '余额') {
					uni.navigateTo({
						url: '/pages/my/balance'
					});
				} else if (text === '小康币') {
					const amount = this.balance.find(item => item.text === '小康币').amount;
					uni.navigateTo({
						url: `/pages/my/coins?amount=${amount}`
					});
				} else if (text === '卡') {
					uni.navigateTo({
						url: '/pages/my/rights'
					});
				} else if (text === '优惠券') {
					uni.navigateTo({
						url: '/pages/my/coupons'
					});
				} else if (text === '零钱') {
					uni.navigateTo({
						url: '/pages/my/pocketMoney'
					});
				}
			},
			goPage(text) {
				if (text === '收货地址') {
					uni.navigateTo({
						url: '/pages/delivery/address'
					});
				} else if (text === '账号与安全') {
					uni.navigateTo({
						url: '/pages/my/security'
					});
				} else if (text === '个人信息') {
					uni.navigateTo({
						url: '/pages/my/information?Member_SerialNumber='+app.globalData.memberInfo.Member_SerialNumber
					});
				}
			},
			goToOrders(text) {
				if(text == '退款/售后'){
					uni.navigateTo({
						url: `/pages/my/salesAfter`
					});
				}else{
					uni.navigateTo({
						url: `/pages/my/orders?text=${encodeURIComponent(text)}`
					});
				}
			},
			goReport(text){
				if(text == '订阅消息'){
					uni.navigateTo({
						url: `/pages/report/daily`
					});
				}
			},
			async isSign(form) {
				const res = await getIsSign(form)
				if (res.Status == "success") {
					this.Status = res.Status
				}
				console.log('getIsSign', res);
			},
		}
	}
</script>

<style scoped>
	.vip {
		width: 61px;
		height: 19px;
		margin-left: -1px;
		font-size: 8px;
		background-color: #e6ceae;
	}

	.sign{
		position: relative;
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	
	.but {
		width: 57px;
		height: 15px;
		position: absolute;
		z-index: 1;
		top: 210px;
		left: 244px;
		font-size: 5px;
		transform: rotate(14deg);
		background-color: transparent;
		border: 1px solid #b0a57e;
		color: #b0a57e;
	}

	.badge {
		position: absolute;
		top: 2px;
		right: 8px;
		background: red;
		color: white;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.btn-primary {
		width: 50px;
		height: 25px;
		font-size: 10px;
		padding: 0;
		background-color: #42bb01;
	}

	.user-info__level-wrapper-2 {
		position: absolute;
		top: 210rpx;
		right: -60px;
		width: 179px;
		height: 99px;
		overflow: hidden;
		color: #e3c86f;
		background-image: linear-gradient(147deg, #414653, #373b44 74%);
		border-radius: 4px;
		box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, .2);
		transform: rotate(15deg);
		transform-origin: left;
	}

	.level2-header {
		height: 25px;
		padding-left: 10px;
	}

	.shop-name {
		display: block;
		max-width: 80px;
		overflow: hidden;
		font-size: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: text-bottom;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.level2-body {
		height: 74px;
		margin: 0 .5px .5px;
		padding: 5px 0 0 9px;
		background-image: linear-gradient(134deg, #4d525e, #343841 79%);
	}

	.level {
		height: 16px;
		padding: 0 2px 0 8px;
		font-size: 10px;
		background: #646875;
		border: .5px solid #e3c86f;
		width: 30%;
		font-size: 7px;
		position: absolute;
		left: 16px;
	}

	.van-button:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
		border: .5px solid #e3c86f;
		border-radius: 4px;
		content: "";
		opacity: 0;
		transition: opacity .3s ease-in-out;
	}

	.van-button:hover:before {
		opacity: 1;
	}

	.van-button__content {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		height: 100%;
	}

	.van-button__text {
		line-height: 15px;
	}

	.level-name {
		display: flex;
		-webkit-box-align: center;
		align-items: center;
	}

	.level-name text {
		display: block;
		max-width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.van-icon-arrow {
		margin-left: 2px;
		font-weight: 700;
		transform: scale(.7);
		transform-origin: 0;
	}

	.user-info__level-wrapper-2 .level2-vip {
		position: absolute;
		top: 53px;
		left: 4px;
		width: 82px;
		height: 50px;
	}
</style>